<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：5、条件渲染</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- v-if -->
		<h1 v-if="ok1">Yes</h1>

		<!-- v-else-if -->
		<h1 v-if="ok2">Yes</h1>
		<h1 v-else>No</h1>

		<!-- 这里v-if控制的元素只是一个，如果我们想控制多个元素呢？
			很自然会想到在被控制的元素里放入多个子元素
		 -->
		<h1 v-if="ok1">
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</h1>

		<!-- 如果只是想单纯控制多个元素，不想显示v-if指令所在的元素呢？即假设ok1 == true
			DOM显示的是
				<p>1</p>
				<p>2</p>
				<p>3</p>
			而不是
				<h1>
					<p>1</p>
					<p>2</p>
					<p>3</p>
				</h1>	

			vue	提供了这一特性，那就是包装元素<template>				
		 -->
		<template v-if="ok2">
			<p>yes1</p>
			<p>yes2</p>
			<p>yes3</p>
		</template>
		<template v-else>
			<p>no1</p>
			<p>no2</p>
			<p>no3</p>
		</template>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				ok1: true,
				ok2: false
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->